/**
 * Button Group for KISSY from bootstrap.
 * @author yiminghe@gmail.com
 */

@import "../../../css/assets/dpl/variables.less";
@import "../../../css/assets/dpl/mixins.less";

.ks-button-group {
    .ks-inline-block_();
    position: relative;
    .ks-clear_();
    .ie67-restore-left-whitespace();
}

// Space out series of button groups
.ks-button-group + .ks-button-group {
    margin-left: 5px;
}

// Float them, remove border radius, then re-add to first and last elements
.ks-button-group .ks-button {
    position: relative;
    float: left;
    margin-left: -1px;
    border-radius: 0;
}

// Set corners individual because sometimes a single button can be in a .ks-button-group and we need :first-child and :last-child to both match
.ks-button-group .ks-button:first-child {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.ks-button-group .ks-button:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

// Reset corners for large buttons
.ks-button-group .ks-button-large:first-child {
    margin-left: 0;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.ks-button-group .ks-button-large:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

// On hover/focus/active, bring the proper ks-button to front
.ks-button-group .ks-button-hover,
.ks-button-group .ks-button:hover,
.ks-button-group .ks-button:focus,
.ks-button-group .ks-button:active,
.ks-button-group .ks-button-focused,
.ks-button-group .ks-button-active {
    z-index: 2;
}